<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #0096dc;color: white;line-height: 60px"
                    @back="goBack" content="相册详情页面">
    </el-page-header>
    <el-container>
        <el-main>
            <!--图片表格开始-->
            <el-table :data="pictureArr"
                      style="width: 100%">
                <el-table-column type="index" label="编号"></el-table-column>
                <!--prop=property属性 设置当前列显示的文本内容为对象的xxx属性-->
                <el-table-column label="图片" width="300">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" width="100%">
                    </template>
                </el-table-column>
                <el-table-column prop="oldName" label="原始文件名">
                </el-table-column>
                <el-table-column prop="sysName" label="系统文件名">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="description" label="图片描述">
                </el-table-column>
                <el-table-column label="操作">
                    <!--scope定义的一个变量名, 里面包含当前行的信息
                    scope.$index得到当前行的下标
                    scope.row 得到当前行对应数组里面的对象
                    -->
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="success"
                                @click="pictureUpdate(scope.$index, scope.row)">修改</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="pictureDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--图片表格结束-->
        </el-main>
    </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                pictureArr:[]
            }
        },
        methods: {
            pictureUpdate(i,b){
                //跳转到修改图片页面
                location.href="/updatePicture.html?id="+b.id;
            },
            pictureDelete(i,b){
                if (confirm("您确认删除此图片吗?")){
                    axios.get("/picture/delete?pictureId="+b.id).then(function () {
                        v.pictureArr.splice(i,1);
                        v.$message.success("删除成功!");
                    })
                }
            },
            goBack() {
                //返回上一页面
                history.back();
            }
        },
        created: function () {

            //发出请求获取相册详情信息
            axios.get("/picture/listByAlbumId"+location.search).then(function (response) {
                v.pictureArr = response.data.data;
            })
        }
    })
</script>
</html>